// src/pages/shizhiran/goal.tsx
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './gender.css';

const Goal: React.FC = () => {
    const [selectedGoal, setSelectedGoal] = useState<string | null>(null);
    const [isNextEnabled, setIsNextEnabled] = useState<boolean>(false);
    const navgater = useNavigate();
    const handleGoalSelect = (goal: string) => {
        setSelectedGoal(goal);
        setIsNextEnabled(true);
    };

    const handleNext = () => {
        if (selectedGoal) {
            console.log('Selected goal:', selectedGoal);
            window.location.href = '/height'; // 跳转到身高页
        }
    };
    const handleBack = () => {
        navgater('/gender');
    };

    const handleSkip = () => {
        navgater('/height');
    };

    const goals = [
        '全身 / 局部变瘦',
        '塑性',
        '保持良好的个人状态',
        '没想好，随便动动'
    ];

    return (
        <div className="container">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 0' }}>
                <button className="back-button" onClick={handleBack}>
                    ←
                </button>
                <div className="progress-bar">
                    <div className="progress" style={{ width: '17%' }}></div>
                </div>
                <button style={{ fontSize: '14px', color: '#666', background: 'none', border: 'none' }} onClick={handleSkip}>跳过</button>
            </div>

            <div className="title">选择目标</div>

            <div className="goal-options">
                {goals.map((goal, index) => (
                    <div
                        key={index}
                        className={`goal-option ${selectedGoal === goal ? 'selected' : ''}`}
                        onClick={() => handleGoalSelect(goal)}
                    >
                        <span className="label">{goal}</span>
                    </div>
                ))}
            </div>

            <button
                className={`next-button1 ${isNextEnabled ? 'enabled' : 'disabled'}`}
                onClick={handleNext}
                disabled={!isNextEnabled}
            >
                下一步
            </button>
        </div>
    );
};

export default Goal;